<template>
    <div>
        <!-- “:inline="true"”表示“一行显示表单”（即“行内表单”） -->
        <el-form ref="searchForm" :model="searchMap" :inline="true" class="demo-form-inline">
            <el-form-item prop="brandAndModelOfCellphone">
                <el-input v-model="searchMap.brandAndModelOfCellphone" class="brandAndModelOfCellphone" placeholder="       手机的品牌和型号       "></el-input>
            </el-form-item>
            <el-form-item prop="nameAndRegionOfSuperiorSupplier">
                <!-- 注：1.在此处“readonly”属性表示“只读”（即“鼠标点击后光标不闪烁，并且输入无反应”）；2.“.native”修饰符被用于监听作为原生事件的点击事件“click”（即监听“点击事件”等原生事件时必须加上该修饰符，否则监听不到） ↓-->
                <el-input v-model="searchMap.nameAndRegionOfSuperiorSupplier" class="nameAndRegionOfSuperiorSupplier" readonly @click.native="dialogSupplierVisible = true" placeholder="上级供应商的名称和所在地"></el-input>
            </el-form-item>
            <el-form-item prop="linkman">
                <el-input v-model="searchMap.linkman" class="linkman" placeholder="           联系人的姓名           "></el-input>
            </el-form-item>
            <el-form-item prop="phoneNumber">
                <el-input v-model="searchMap.phoneNumber" class="phoneNumber" placeholder="       联系人的手机号码       "></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <!-- <el-button @click="resetForm('searchForm')">重置</el-button> -->
                <!-- 注：以下不要在“$refs”前加“this”（即“this.$refs['searchForm'].resetFields()”是错误的写法，因为写成这样时浏览器的控制台会报错说“$refs”的值为空）。若要用“this”则只能如上一行↑所示把“this.$refs[formName].resetFields()”放到名为“resetForm”的函数中去↓ -->
                <el-button @click="$refs['searchForm'].resetFields()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="table" :data="list" :cell-style="rowStyle" height="380" border style="width: 100%">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column prop="brandAndModelOfCellphone" align="center" width="133" label="手机的品牌和型号"><!-- “"scope"”代表“当前行对象” --><template slot-scope="scope"><span>{{scope.row.brandAndModelOfCellphone | brandAndModelOfCellphonefilter}}</span></template></el-table-column>
            <el-table-column align="center" width ="50" label="外观"><!-- 图片查看器（兼容IE浏览器）→ --><a style="cursor: pointer;" @click="onPreview">预览</a><el-image ref="preview" class="hideImgDiv" :src="url" :preview-src-list="[url]" :z-index="9999"></el-image></el-table-column>
            <el-table-column prop="retailPrice" width="63" align="center" label="零售价"></el-table-column>
            <el-table-column prop="purchasePrice" width="63" align="center" label="进货价"></el-table-column>
            <el-table-column prop="theNumberOfsold" width="95" align="center" label="已售出数量"></el-table-column>
            <el-table-column prop="storageNumber" width="90" align="center" label="库存数量"></el-table-column>
            <el-table-column prop="nameAndRegionOfSuperiorSupplier" align="center" label="上级供应商的名称和所在地" width="189"></el-table-column>
            <el-table-column prop="linkman" width="70" align="center" label="联系人"></el-table-column>
            <el-table-column prop="phoneNumber" align="center" label="手机号码"></el-table-column>
            <el-table-column width="152" align="center" label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button></template></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

        <!-- 这是选择供应商用的对话框。其中“title”表示“对话框的标题”，当“:visible.sync”为“true”时会弹出对话框↓ -->
        <el-dialog title="选择供应商" :visible.sync="dialogSupplierVisible" width="773px">
            <!-- Supplier在此处是Goods的子组件，无需显示全部内容，只需选择性展示部分内容。达到这种效果的方法为“利用‘v-bind’单向数据绑定某个属性，向这个属性传入一个布尔值‘true’或‘false’”（因为子组件能接收到这个属性的值）。在此处 :isDialog="true"表示子组件Supplier是弹出的对话框↓ -->
            <supplier :isDialog="true" @be_Selected_Supplier="beSelectedSupplier"></supplier>
        </el-dialog>

        <!-- 这是编辑商品用的对话框↓ -->
        <el-dialog title="编辑商品" :visible.sync="dialogFormVisible" width="391.5px">
            <el-form :model="beSubmittedData" ref="beSubmittedForm" :rules="rules" label-width="140px" label-position="right" style="width:356.5px;">
                <el-form-item label="手机的品牌和型号" prop="brandAndModelOfCellphone"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.brandAndModelOfCellphone" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="零售价" prop="retailPrice"> <!-- “autocomplete”是HTML5中新出的属性，被用作“浏览器自动填充用户在输入框中曾经输入过的数据”↓ -->                    
                    <el-input v-model="beSubmittedData.retailPrice" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="进货价" prop="purchasePrice">
                    <el-input v-model="beSubmittedData.purchasePrice" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="theNumberOfsold" label="已售出数量">
                    <el-input v-model="beSubmittedData.theNumberOfsold" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存数量" prop="storageNumber">
                    <el-input v-model="beSubmittedData.storageNumber" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="linkman">
                    <el-input v-model="beSubmittedData.linkman" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input v-model="beSubmittedData.phoneNumber" style="width: 185px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商名和所在地" prop="nameAndRegionOfSuperiorSupplier">
                    <el-input type="textarea" readonly @click.native="selectSupplierInEditGoodsDialog" v-model="beSubmittedData.nameAndRegionOfSuperiorSupplier" style="width: 185px;" placeholder="点击此处选择供应商" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" @click="addData('beSubmittedForm')">确 定</el-button> -->
                <el-button type="primary" @click="beSubmittedData.id === null ? addData('beSubmittedForm') : updateData('beSubmittedForm')">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import goodsApi from '@/api/goods'

import Supplier from '@/views/supplier' // 把“Supplier”作为子组件导入（注意：在导入组件时给组件取名时，组件名称的首字母一般采用大写英文字母）

var fileName = 'HUAWEI Mate30 5G'

// 正在售卖的手机品牌和型号
const brandAndModelOfCellphoneOptions = [
    {id:'1',name:'华为 Mate30 5G'},
    {id:'2',name:'小米 MIX4'},
    {id:'3',name:'OPPO reno6 5G'},
    {id:'4',name:'vivo X70'},
]

export default {

    components: { // ←此处表示把“supplier”注册为“goods”的子组件（不要忘记注册,因为只有在“components”这个属性中注册这个子组件后才能使用它）
        Supplier
    },

    data() {
        return {
            list:[],
            total:0, // ←左边这项表示“总记录数”
            currentPage:1, // ←左边这项表示“当前页码”
            pageSize:10, // ←左边这项表示“每页显示10条数据”
            searchMap:{ // ←左边这项表示“条件查询绑定的条件值（字段值）”
                brandAndModelOfCellphone:'',
                retailPrice:'',
                purchasePrice:'',
                nameAndRegionOfSuperiorSupplier:'',
                linkman:'',
                phoneNumber:''
            },
            dialogSupplierVisible:false, // ←左边这项被用来控制对话框是否会被弹出（针对“选择供应商”对话框）
            dialogFormVisible:false, // ←左边这项被用来控制对话框是否会被弹出（针对“编辑商品”对话框）
            beSubmittedData:{ // ←左边这项被用来表示“在对话框中被提交的数据”
                supplierId:null,
                brandAndModelOfCellphone:'',
                retailPrice:'',
                purchasePrice:'',
                theNumberOfsold:'',
                storageNumber:'',
                nameAndRegionOfSuperiorSupplier:'',
                linkman:'',
                phoneNumber:''
            },
            rules:{ // ←左边这项被用来表示“表单的校验规则”
                // nameAndRegionOfSuperiorSupplier:[{required:true,message:'名称和所在地必填',trigger:'blur'}],
                linkman:[{required:true,message:'联系人的姓名必填',trigger:'blur'}],
                phoneNumber:[{required:true,message:'联系人的电话必填',trigger:'blur'},{min:11,max:11,message:'手机号码是11位数',trigger:'blur'}],
                brandAndModelOfCellphone:[{required:true,message:'手机品牌型号必填',trigger:'blur'}],
                purchasePrice:[{required:true,message:'进货价格不能为空',trigger:'blur'}],
                retailPrice:[{required:true,message:'零售价格不能为空',trigger:'blur'}],
                theNumberOfsold:[{required:true,message:'已售出的数量必填',trigger:'blur'}],
                storageNumber:[{required:true,message:'库存数量不能为空',trigger:'blur'}],
            },
            isEditGoodsDialog:false, // ←左边这项表示“是否为‘编辑商品’对话框”
            brandAndModelOfCellphoneOptions,
            url:require('/src/assets/' + fileName + '.jpg'),
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        /* resetForm(formName){
            this.$refs[formName].resetFields()
        }, */
        fetchData(){
            goodsApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
                const be_responsed_goods_data = response.data.data
                console.log(be_responsed_goods_data.rows)
                console.log(be_responsed_goods_data.total)
                this.list = be_responsed_goods_data.rows
                console.log(this.list)
                this.total = be_responsed_goods_data.total
            })
        },
        // 这个函数（方法）在“每页显示条数被改变”时被触发，“value”代表“最新的每页显示的条数”↓
        handleSizeChange(value){
            console.log(value)
            this.pageSize = value
            this.fetchData()
        },
        // 这个函数（方法）在“当前页码被改变”时被触发，“value”代表“最新的页码”↓
        handleCurrentChange(value){
            console.log(value)
            this.currentPage = value
            this.fetchData()
        },
        // 被选择的供应商
        beSelectedSupplier(currentRow){
            console.log('这里是父组件“Goods”，接收来自子组件“Supplier”的消息',currentRow)
            if (this.isEditGoodsDialog) {
                // 当前对话框是通过点击“编辑商品”对话框中的“供应商名和所在地”打开的被用于选择供应商的对话框
                this.beSubmittedData.brandAndModelOfCellphone = currentRow.brandAndModelOfSupply // 手机的品牌和型号
                this.beSubmittedData.nameAndRegionOfSuperiorSupplier = currentRow.nameAndRegionOfSuperiorSupplier // 上级供应商的名称和所在地
                this.beSubmittedData.purchasePrice = currentRow.purchasePrice // 进货价
                this.beSubmittedData.linkman = currentRow.linkmanName // 联系人的姓名
                this.beSubmittedData.phoneNumber = currentRow.phoneNumber // 联系人的手机号码
                this.beSubmittedData.supplierId = currentRow.id // 供应商的ID
            }
            else{
                // 当前对话框是在行内表单（即搜索区域）处点击“placeholder”（即“占位文字/占位符”）为“上级供应商的名称和所在地”的文字输入框后打开的被用于选择供应商的对话框
                this.searchMap.brandAndModelOfCellphone = currentRow.brandAndModelOfSupply // 手机的品牌和型号
                this.searchMap.nameAndRegionOfSuperiorSupplier = currentRow.nameAndRegionOfSuperiorSupplier // 上级供应商的名称和所在地
                this.searchMap.linkman = currentRow.linkmanName // 联系人的姓名
                this.searchMap.phoneNumber = currentRow.phoneNumber // 联系人的手机号码
                this.searchMap.supplierId = currentRow.id // 供应商的ID
            }
            this.isEditGoodsDialog = false //注意：在下面↓关闭对话框前要在此处为“this.isEditGoodsDialog”重新赋值，把它的值设置为“false”（即“恢复初始值”）。因为若它的值一直为“true”，则上面的“else”路径会失效↑
            this.dialogSupplierVisible = false //关闭弹出的被用于选择供应商的对话框
        },
        // 弹出新增窗口
        handleAdd(){
            console.log(this.beSubmittedData)
            this.dialogFormVisible = true
            this.$nextTick(() => { // ←左边这项是Vue中提供的内置的方法，因为回调函数无参数，所以要保留小括号。另外“this.$nextTick”是一个“异步事件”（指“当页面渲染结束后它的回调函数才会被执行”的事件），因为弹出窗口打开后需要花费时间加载（渲染）Dom（即那个表单），所以我们就应该等待它加载完成后再调用“resetFields”方法来重置表单和清除样式。
                this.$refs['beSubmittedForm'].resetFields()
            })
        },
        // 提交新增的数据
        addData(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                    // 提交表单
                    console.log('提交新增的数据')
                    goodsApi.addgoods(this.beSubmittedData).then(response => {
                        const be_responsed_data = response.data
                        if(be_responsed_data.flag){
                            // 新增商品成功，然后刷新列表数据
                            this.fetchData()
                            this.dialogFormVisible = false // 关闭窗口
                        }
                        else{
                            // 新增商品失败，弹出提示信息
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{
                    return false
                }
            })
        },
        // 在“编辑商品”对话框中选择供应商
        selectSupplierInEditGoodsDialog(){
            this.isEditGoodsDialog = true // ←左边这句表达式表示“当前对话框是通过点击‘编辑商品’对话框中的‘供应商名和所在地’打开的被用于选择供应商的对话框”
            this.dialogSupplierVisible = true
        },
        // 打开编辑窗口
        handleEdit(id){
            console.log('编辑',id)
            this.handleAdd() // ←注意：此处不能直接使用“this.dialogFormVisible = true”来弹出对话框，因为需要调用“handleAdd”方法来清除这个对话框在这次被打开之前被打开时里面的表单上面可能残存的数据和样式（即校验结果）
            goodsApi.getGoodsInformationById(id).then(response => {
                const be_responsed_data = response.data
                if (be_responsed_data.flag) {
                    this.beSubmittedData = be_responsed_data.data
                    console.log(this.beSubmittedData)
                }
                else{ //提示获取数据失败
                    this.$message({
                        message:be_responsed_data.message,
                        type:'warning',
                        center:true
                    })
                }
            })
        },
        // 更新数据
        updateData(formName){
            console.log('updateData')
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 提交更新的数据（必须在页面里的表单通过数据校验的情况下发送请求进行更新）
                    goodsApi.updateGoodsInformation(this.beSubmittedData).then(response =>{
                        const be_responsed_data = response.data
                        if (be_responsed_data.flag) {
                            // 更新数据成功，然后刷新数据列表
                            this.fetchData()
                            this.dialogFormVisible = false
                        }
                        else{
                            this.$message({
                                message:be_responsed_data.message,
                                type:'warning',
                                center:true
                            })
                        }
                    })
                }
                else{ // 表单没有通过数据校验
                    return false
                }
            })
        },
        handleDelete(id){
            console.log('删除',id)
            this.$confirm('你确定要删除这个商品吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消'
            }).then(() => {
                // 若点击“确定”则执行如下代码↓
                console.log('确认')
                goodsApi.deleteGoodsInformationById(id).then(response => {
                    const be_responsed_data = response.data
                    // 提示该商品被删除成功或者被删除失败
                    this.$message({
                        message:be_responsed_data.message,
                        center:true,
                        type:be_responsed_data.flag?'success':'error'
                    })
                    if (be_responsed_data.flag) {
                        // 该商品被删除成功，然后刷新列表数据
                            this.fetchData()
                    }
                })
            }).catch(() =>{
                // 点击“取消”。此处无需做任何逻辑处理（因为浏览器会自动关闭消息提示框）
                console.log('取消')
            })
        },
        rowStyle(){
            return "text-align:center";
        },
        onPreview(brandAndModelOfCellphone) {
          //调用image组件中的大图浏览图片方法
          this.$refs.preview.clickHandler();
        },
    },

    filters: {
        brandAndModelOfCellphonefilter(id){
            const brandAndModelOfCellphoneObject = brandAndModelOfCellphoneOptions.find(obj => obj.id === id)
            return brandAndModelOfCellphoneObject ? brandAndModelOfCellphoneObject.name : null
        }
    },

    watch: {
        // 监听器（监听表格绑定的数据发生的变化。被用于当表格绑定的数据发生变化时重新布局表格，使每一列的表头与表体不发生错位）
        list:{
            handler(){
                this.$nextTick(() => {
 		            // 初始化表格（即每一列在接收到新数据时根据新的数据自动重新调整列宽（即“重新布局表格”），使表头与表体不发生错位）
                    this.$refs.table.doLayout();
                })
            },
            deep:true
        }
    }
}
</script>
<style lang="scss" scoped>
    .hideImgDiv{::v-deep.el-image__inner{display: none;}}
    .el-pagination{text-align: center;}
    .el-form{
        margin-top:15px;
        margin-bottom:15px;
        height:40px;
    }
    .brandAndModelOfCellphone{width:192px;height:40px;}
    .nameAndRegionOfSuperiorSupplier,.linkman,.phoneNumber{
        width:202px;
        height:40px;
    }
    div{::v-deep.el-pagination{margin-top: 5px;margin-bottom: 5px;}}
    div{::v-deep.el-input__inner{text-align: center;}}
    div{::v-deep.el-textarea__inner{height: 38px;text-align: center;}}
    div{::v-deep.el-dialog__body{height: 350px;overflow-y: auto;overflow-x: hidden;}}
    div{::v-deep.el-form-item__error{white-space: pre;top: 28px;left:14px;text-align: center;}}
</style>
